﻿<form role="form" method="POST" id="question-editor" name="questionForm" unsaved-warning-form ng-show="activeQuestion">
    <div id="show-reload-details-promt" class="ng-cloak" ng-show="activeQuestion.shouldUserSeeReloadDetailsPromt">
        <div class="inner">{{'QuestionToUpdateOptions' | i18next}} <a ng-click="loadQuestion();" href="javascript:void(0);" ng-i18next="QuestionClickReload"></a></div>
    </div>
    <div class="form-holder">

        <div class="breadcrumbs-container">
            <div data-item-breadcrumbs data-crumbs="activeQuestion.breadcrumbs"></div>
        </div>

        <div class="row">
            <div class="form-group col-xs-6">
                <label class="wb-label" ng-i18next="QuestionQuestionType"></label><br>
                <div class="btn-group type-container-dropdown" uib-dropdown>
                    <button id="questionTypeBtn" class="btn btn-default form-control" uib-dropdown-toggle type="button">
                        <i class="icon {{answerTypeClass[activeQuestion.type]}}"></i>
                        <span class="vertical-line"></span>
                        {{activeQuestion.typeName}}
                        <span class="dropdown-arrow"></span>
                    </button>

                    <ul class="dropdown-menu " role="menu" aria-labelledby="questionTypeBtn">
                        <li role="presentation" ng-repeat="type in activeQuestion.questionTypeOptions">
                            <a role="menuitem" tabindex="-1" ng-click="setQuestionType(type.value)">
                                <i class="icon {{answerTypeClass[type.value]}}"></i>
                                {{type.text}}
                            </a>
                        </li>
                    </ul>
                </div>
                <input type="hidden" ng-model="activeQuestion.type" required />
            </div>

            <div class="form-group input-variable-name col-xs-5 pull-right">
                <label for="edit-question-variable-name" class="wb-label">{{'QuestionVariableName' | i18next }}<help key="variableName" placement="left" /></label><br />
                <input id="edit-question-variable-name" type="text"
                       ng-model="activeQuestion.variable"
                       spellcheck="false"
                       class="form-control" maxlength="32">
            </div>
        </div>
        <div class="form-group" ng-show="activeQuestion.type=='GpsCoordinates' && activeQuestion.questionScope == 'Identifying'">
            <span class="edit-question-note" ng-i18next="QuestionGpsNavigation">
            </span>
        </div>
        <div class="form-group">
            <label for="edit-variable-label" class="wb-label">{{'QuestionVariableLabel' | i18next}}<help key="variableLabel" /></label><br>
            <input id="edit-variable-label" type="text" ng-model="activeQuestion.variableLabel" class="form-control" maxlength="80">
        </div>

        <div class="form-group">
            <label for="edit-question-title-highlight" class="wb-label" ng-i18next="QuestionText"></label><br>
            <div class="pseudo-form-control">
                <div id="edit-question-title-highlight"
                     ui-ace="{ onLoad : setupAceForSubstitutions, require: ['ace/ext/language_tools'] }" ng-model="activeQuestion.title"></div>
            </div>
            <div class="question-type-specific-block"
                 ng-include="'views/question-details/' + activeQuestion.type + '-template.html'"
                 ng-if="activeQuestion.type != undefined
                 && (activeQuestion.type != 'GpsCoordinates'
                 && activeQuestion.type != 'QRBarcode'
                 && activeQuestion.type != 'Audio')
                 ">
            </div>
        </div>
        <div class="form-group" ng-show="!((showInstruction===undefined && initialQuestion.instructions) || showInstruction)">
            <button type="button" class="btn btn-lg btn-link" ng-click="showInstruction=true" ng-i18next="QuestionAddInstruction"></button>
        </div>

        <div class="row" ng-show="(showInstruction===undefined && initialQuestion.instructions) || showInstruction">
            <div class="form-group col-xs-11">
                <label for="edit-question-instructions"> {{'QuestionInstruction' | i18next}} <help key="instruction" /></label>

                <input id="cb-hide-instructions" type="checkbox" class="wb-checkbox" ng-model="activeQuestion.hideInstructions" />
                <label for="cb-hide-instructions"><span></span>{{'QuestionHideInstruction' | i18next}} <help key="hideInstructions" /></label>

                <div class="pseudo-form-control">
                    <div id="edit-question-instructions"
                         ui-ace="{ onLoad : setupAceForSubstitutions, require: ['ace/ext/language_tools'] }" ng-model="activeQuestion.instructions"></div>
                </div>
            </div>

            <div class="form-group col-xs-1">
                <button type="button" class="btn cross instructions-cross"
                        ng-click="showInstruction=false;activeQuestion.instructions='';activeQuestion.hideInstructions=false;questionForm.$setDirty();"></button>
            </div>
        </div>

        <div class="form-group" ng-show="(doesQuestionSupportEnablementConditions() && !((showEnablingConditions===undefined && initialQuestion.enablementCondition) || showEnablingConditions))">
            <button type="button" class="btn btn-lg btn-link" ng-click="showEnablingConditions=true" ng-i18next="AddEnablingCondition"></button>
        </div>

        <div class="row" ng-show="(doesQuestionSupportEnablementConditions() && ((showEnablingConditions===undefined && initialQuestion.enablementCondition) || showEnablingConditions))">
          <div class="form-group col-xs-11" >
            <div class="enabling-group-marker" ng-class="{'hide-if-disabled': activeQuestion.hideIfDisabled}"></div>
            <label for="edit-question-enablement-condition">{{'EnablingCondition' | i18next}} <help key="conditionExpression" /></label>

            <input type="checkbox" class="wb-checkbox" disabled="disabled" checked="checked" ng-if="questionnaire.hideIfDisabled"
                   title="{{ 'HideIfDisabledNested' | i18next }}" />

            <input id="cb-hideIfDisabled" type="checkbox" class="wb-checkbox" ng-model="activeQuestion.hideIfDisabled" ng-if="!questionnaire.hideIfDisabled" />
            <label for="cb-hideIfDisabled"><span title="{{questionnaire.hideIfDisabled ? ('HideIfDisabledNested' | i18next) : ''}}"></span>{{'HideIfDisabled' | i18next}} <help key="hideIfDisabled" /></label>

            <div class="pseudo-form-control">
                <div id="edit-question-enablement-condition"
                     ui-ace="{ onLoad : aceLoaded, require: ['ace/ext/language_tools'] }" ng-model="activeQuestion.enablementCondition"></div>
            </div>
        </div>
            <div class="form-group col-xs-1">
                <button type="button" class="btn cross instructions-cross"
                        ng-click="showEnablingConditions=false;activeQuestion.enablementCondition='';activeQuestion.hideIfDisabled=false;questionForm.$setDirty();"></button>
            </div>
        </div>
        <div class="form-group validation-group" ng-if="doesQuestionSupportValidations()" ng-repeat="validation in activeQuestion.validationConditions" id="validationCondition{{$index}}">
            <div class="validation-group-marker"></div>
            <label>{{'ValidationCondition' | i18next}} {{$index + 1}} <help key="validationExpression" /></label>

            <input id="cb-isWarning{{$index}}" type="checkbox" class="wb-checkbox" ng-model="validation.severity" ng-true-value="'Warning'" ng-false-value="'Error'" />
            <label for="cb-isWarning{{$index}}"><span></span>{{'IsWarning' | i18next}}</label>

            <button type="button" class="btn delete-btn-sm delete-validation-condition" ng-click="removeValidationCondition($index)" tabindex="-1"></button>

            <div class="pseudo-form-control">
                <div ui-ace="{ onLoad : aceLoaded, require: ['ace/ext/language_tools'] }"
                     ng-attr-id="{{'validation-expression-' + $index}}"
                     ng-model="validation.expression"
                     ng-attr-tabindex="{{$index + 1}}"></div>
            </div>

            <label for="validationMessage{{$index}}" class="validation-message">{{'ErrorMessage' | i18next}} <help key="validationMessage" /></label>
            <div class="pseudo-form-control">
                <div ng-attr-id="{{'validation-message-' + $index}}" ng-attr-tabindex="{{$index + 1}}"
                     ui-ace="{ onLoad : setupAceForSubstitutions, require: ['ace/ext/language_tools'] }" ng-model="validation.message"></div>
            </div>
        </div>
        <div class="form-group" ng-if="doesQuestionSupportValidations() && activeQuestion.validationConditions.length < 10">
            <button type="button" class="btn btn-lg btn-link" ng-click="addValidationCondition()" ng-i18next="AddValidationRule"></button>
        </div>

        <div class="form-group" ng-if="doesQuestionSupportQuestionScope()">
            <div class="form-group pull-right">
                <label for="Question-scope">{{'QuestionScope' | i18next }}&nbsp;</label>

                <div class="btn-group dropup " uib-dropdown>
                    <button class="btn dropdown-toggle" id="Question-scope" uib-dropdown-toggle type="button">
                        {{ (getQuestionScopes(activeQuestion) | filter : {value : activeQuestion.questionScope})[0].text | i18next }}
                        <span class="dropdown-arrow"></span>
                    </button>

                    <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
                        <li role="presentation" ng-repeat="scope in getQuestionScopes(activeQuestion)">
                            <a role="menuitem" tabindex="-1" ng-click="changeQuestionScope(scope)">
                                {{scope.text}}
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <script type="text/ng-template" id="categorical-filter-expression">
            <div class="add-filter-label" ng-if="activeQuestion.showFilterInput != true && activeQuestion.isCascade != true">
                <button type="button" class="btn btn-lg btn-link" ng-click="activeQuestion.showFilterInput = true" ng-i18next="AddFilter"></button>
            </div>

            <div class="row" ng-hide="activeQuestion.showFilterInput != true || activeQuestion.isCascade == true">
                <div class="form-group col-xs-11">
                    <label class="wb-label" for="optionsFilterExpression" ng-i18next="QuestionFilter"></label>
                    <div class="pseudo-form-control">
                        <div id="optionsFilterExpression" ng-if="activeQuestion.isLinked && activeQuestion.linkedToEntity.type != 'textlist'"
                             ui-ace="{ onLoad : aceLoaded, require: ['ace/ext/language_tools'] }"
                             ng-model="activeQuestion.linkedFilterExpression"></div>
                        <div id="optionsFilterExpression" ng-if="!(activeQuestion.isLinked && activeQuestion.linkedToEntity.type != 'textlist')"
                             ui-ace="{ onLoad : aceLoadedForOptionFilter, require: ['ace/ext/language_tools'] }"
                             ng-model="activeQuestion.optionsFilterExpression"></div>
                    </div>
                </div>

                <div class="form-group col-xs-1">
                    <button type="button" class="btn cross filter-cross"
                            ng-click="activeQuestion.showFilterInput=false;activeQuestion.linkedFilterExpression='';activeQuestion.optionsFilterExpression='';questionForm.$setDirty();"></button>
                </div>
            </div>


        </script>

        <script type="text/ng-template" id="linkTemplate.html">
            <div id="sourceOfLinkedEntity" class="dropdown-with-breadcrumbs-and-icons">
                <input type="hidden" name="linkedToEntity" ng-model="activeQuestion.linkedToEntity" ng-required="true" />
                <label for="linkedEntitySource" ng-i18next="QuestionLinkedDescr"></label>
                <div class="btn-group" uib-dropdown>
                    <button class="btn dropdown-toggle" uib-dropdown-toggle id="linkedEntitySource" type="button">
                        <span class="select-placeholder" ng-if="(activeQuestion.linkedToEntity.title || '') == ''" ng-i18next="SelectQuestion"></span>

                        <span class="selected-item" ng-if="(activeQuestion.linkedToEntity.title || '') !== ''">
                            <span class="path">{{activeQuestion.linkedToEntity.breadcrumbs}}</span>
                            <span class="chosen-item" ng-if="activeQuestion.linkedToEntity.type!=='roster'">
                                <i class="dropdown-icon" ng-class="'icon-'+activeQuestion.linkedToEntity.type"></i>
                                {{activeQuestion.linkedToEntity.title | escape}}  (<span class="var-name-line">{{activeQuestion.linkedToEntity.varName}}</span>)
                            </span>
                            <span class="linked-roster-source" ng-if="activeQuestion.linkedToEntity.type==='roster'">
                                {{activeQuestion.linkedToEntity.title | escape}}  (<span class="var-name-line">{{activeQuestion.linkedToEntity.varName}}</span>)
                            </span>
                        </span>
                        <span class="dropdown-arrow"></span>
                    </button>

                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation" ng-class="{'dropdown-header': breadCrumb.isSectionPlaceHolder}" ng-repeat="breadCrumb in sourceOfLinkedEntities track by $index">
                            <span ng-if="breadCrumb.isSectionPlaceHolder">{{::breadCrumb.title}}</span>

                            <a ng-if="!breadCrumb.isSectionPlaceHolder && breadCrumb.type==='roster'"
                               ng-click="setLinkSource(breadCrumb.id, activeQuestion.linkedFilterExpression, activeQuestion.optionsFilterExpression)"
                               role="menuitem"
                               tabindex="-1"
                               class="linked-roster-source"
                               href="javascript:void(0);">
                                <div>
                                    <i class="dropdown-icon icon-{{breadCrumb.questionType || 'none'}}"></i>
                                    <span ng-bind-html="breadCrumb.title | escape"></span>
                                </div>
                                <div class="var-block">
                                    <span class="var-name" ng-bind-html="breadCrumb.varName"></span>
                                </div>
                            </a>

                            <a ng-if="!breadCrumb.isSectionPlaceHolder && breadCrumb.type!=='roster'"
                               ng-click="setLinkSource(breadCrumb.id, activeQuestion.linkedFilterExpression, activeQuestion.optionsFilterExpression)"
                               role="menuitem"
                               tabindex="-1"
                               class="linked-question-source"
                               href="javascript:void(0);">
                                <div>
                                    <i class="dropdown-icon icon-{{breadCrumb.type}}"></i>
                                    <span ng-bind-html="breadCrumb.title | escape"></span>
                                </div>
                                <div class="var-block">
                                    <span class="var-name" ng-bind-html="breadCrumb.varName"></span>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <p class="help-block ng-cloak" ng-show="questionForm.linkedToEntity.$error.required" ng-i18next="QuestionMustBeBound">
                </p>
            </div>
        </script>
    </div>
    <div class="form-buttons-holder">
        <div class="pull-left">
            <button type="submit" ng-show="!questionnaire.isReadOnlyForUser && !currentChapter.isReadOnly" id="edit-chapter-save-button" class="btn btn-lg " ng-class="{ 'btn-primary': questionForm.$dirty }" unsaved-warning-clear ng-click="saveQuestion()" ng-disabled="!questionForm.$valid" ng-i18next>Save</button>
            <button type="button" ng-show="currentChapter.isReadOnly && currentChapter.isCover" id="jump-to-button" class="btn btn-lg btn-link" unsaved-warning-clear ui-sref="questionnaire.chapter.question({itemId: activeQuestion.itemId, chapterId: activeQuestion.chapterId })" ng-i18next>JumpToEdit</button>
            <button type="reset"  id="edit-chapter-cancel-button" class="btn btn-lg btn-link" unsaved-warning-clear ng-click="cancelQuestion()" ng-i18next>Cancel</button>
        </div>
        <div class="pull-right">
            <button type="button" ng-show="!questionnaire.isReadOnlyForUser && !currentChapter.isReadOnly" id="add-comment-button" class="btn btn-lg btn-link" ng-click="toggleComments(activeQuestion)" unsaved-warning-clear>
                <span ng-i18next ng-show="!isCommentsBlockVisible && commentsCount == 0">EditorAddComment</span>
                <span ng-show="!isCommentsBlockVisible && commentsCount > 0">{{'EditorShowComments' | i18next: { count: commentsCount } }}</span>
                <span ng-i18next ng-show="isCommentsBlockVisible">EditorHideComment</span>
            </button>
            <button type="button" ng-show="!questionnaire.isReadOnlyForUser && !currentChapter.isReadOnly" id="edit-chapter-delete-button" class="btn btn-lg btn-link" ng-click="deleteQuestion(activeQuestion)" unsaved-warning-clear ng-i18next>Delete</button>
            <ng-include src="'moveToChapterSnippet'" ng-show="!questionnaire.isReadOnlyForUser && !currentChapter.isReadOnly" />
        </div>
    </div>
</form>
